<template>
    <div>

        <el-card class="modifyInfo" shadow="hover" title="修改密码">
        <div slot="header" class="clearfix">
            <span>修改密码</span>
        </div>
            <el-form label-position="left" label-width="80px" :model="modifyPassword" ref="passwordForm" :rules="passwordRule">
                <el-form-item label="用户名">
                    <el-input v-model="username" disabled></el-input>
                </el-form-item>
                <el-form-item label="旧密码" prop="oldPassword" >
                    <el-input show-password  placeholder="请输入旧密码" v-model="modifyPassword.oldPassword"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                    <el-input show-password placeholder="请输入新密码" v-model="modifyPassword.newPassword"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="qyPassword" @keyup.enter.native="submitPassword()"> 
                    <el-input show-password placeholder="请确认密码" v-model="modifyPassword.qyPassword"></el-input>
                </el-form-item>
                <el-form-item style="float:left;" > 
                    <el-button type="primary"  @click="submitPassword()">保存</el-button>
                    <el-button type="info" @click="resetForm('passwordForm')">清空</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
    
</template>

<script>
import {modifyPassword} from '@/api/index.js'
export default {
    data() {
        return {
            activeName:"first",
            modifyPassword:{
                newPassword:"",
                oldPassword:"",
                qyPassword: ""
            },
            username: window.sessionStorage.getItem("username"),
            modifyuser:{},
            passwordRule:{
                oldPassword: [
                    { required: true, message: '请输入旧密码', trigger: 'blur' },
                    { min: 4, max: 18, message: '长度在 4 到 18 个字符', trigger: 'blur' }
                ],
                newPassword: [
                    { required: true, message: '请输入新密码', trigger: 'blur' },
                    { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
                ],
                qyPassword: [
                    { required: true, message: '请输入确认密码', trigger: 'blur' },
                    { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
                ],
            },
            infoRule:{
                nick: [
                    { required: true, message: '请输入昵称', trigger: 'blur' },
                    { min: 1, max: 18, message: '长度在 1 到 18 个字符', trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    { min: 3, max: 18, message: '长度在 3 到 18 个字符', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入手机号码', trigger: 'blur' },
                    { min: 8, max: 18, message: '长度在 8 到 18 个字符', trigger: 'blur' }
                ],
                gender: [
                    { required: true, message: '请输入性别', trigger: 'blur' },
                ],
            }
        }
    },
    methods: {
        // copyInfo(){
        //     this.modifyuser = JSON.parse(JSON.stringify(this.getUserInfo));
        //     console.log(this.modifyuser);
        // },
        // submitInfo(){
        //     this.$refs.infoForm.validate((valid)=>{
        //         if(!valid) return;
        //         console.log(this.modifyuser);
        //     })
        //     console.log(this.modifyuser);
        // },
        submitPassword(){
            this.$refs.passwordForm.validate((valid)=>{
                if(valid && this.modifyPassword.newPassword === this.modifyPassword.qyPassword){
                    modifyPassword(this.modifyPassword).then(res=>{
                        this.$message.success(res.message)
                        this.$router.push('/login')
                    })
                } else{
                    this.$message.error("两次新密码不一致或新密码不符合规范，请检查重新输入。")
                }
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
    created() {
        // this.copyInfo();
    },
    computed:{
        // getUserInfo(){
        //     return this.$store.userinfo
        // }
    }
}
</script>

<style lang="less" scoped>
.el-breadcrumb{
    margin-bottom: 15px;
    font-size: 17px;
}
.userinfo{
    margin-left: 20px;
    margin-top: 20px;
    margin-right: 10px;
    width: 30%;
    height: 470px;
    /* // border-radius: 20px; */
    float: left;
}
.clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
.clearfix:after {
    clear: both
}
.modifyInfo{
    margin-top: 20px;
    width: 60%;
    height: 470px;
    float: left;
}
.list-group-item{
    list-style-type: none;
    float: left;
}
.el-divider{
    margin: 5px;
    
}

.showInfo{
    el-form-item{
        margin-bottom: 0px;
    }
}
</style>